<template>
  <!-- 添加  搜所 -->
  <div class="app-container">
    <div class="filter-container">
      <el-row>
        <el-col align="left" :span="8">
          <el-button
            type="primary add_btn height32"
            icon="el-icon-circle-plus-outline"
            size="small"
            @click="handleCreatebutton"
          >
            新增
          </el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 表 -->
    <el-table :data="list">
      <el-table-column label="Id" prop="sid" align="center"> </el-table-column>
      <el-table-column label="供应商名称" prop="supplierName" align="center" />
      <el-table-column label="联系人名称" prop="contactName" align="center" />
      <el-table-column label="联系人手机" prop="contactMobile" align="center" />
      <el-table-column
        label="联系人电话"
        prop="contactTelephone"
        align="center"
      />
      <el-table-column label="银行账号" prop="bankAccount" align="center" />
      <el-table-column label="供应商地址" prop="address" align="center" />
      <el-table-column label="医院id" prop="hospitalId" align="center" />
      <el-table-column label="创建时间" prop="createTime" align="center" />
      <el-table-column label="更新时间" prop="updateTime" align="center" />

      <el-table-column align="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleUpdate(scope.row)"
          >
            Update</el-button
          >
        </template>
      </el-table-column>

      <el-table-column align="left">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            Delete
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增-修改 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="100px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item
          label="供应商名称"
          prop="supplierName"
          placeholder="请选择填写供应商名称"
          size="small"
        >
          <el-input v-model="temp.supplierName" />
        </el-form-item>

        <el-form-item
          label="联系人名称"
          prop="contactName"
          placeholder="请选择填写联系人名称"
          size="small"
        >
          <el-input v-model="temp.contactName" />
        </el-form-item>

        <el-form-item
          label="联系人手机"
          prop="contactMobile"
          placeholder="请选择填写联系人手机"
          size="small"
        >
          <el-input v-model="temp.contactMobile" />
        </el-form-item>

        <el-form-item
          label="联系人电话"
          prop="contactTelephone"
          placeholder="请选择填写联系人电话"
          size="small"
        >
          <el-input v-model="temp.contactTelephone" />
        </el-form-item>

        <el-form-item
          label="银行账号"
          prop="bankAccount"
          placeholder="请选择填写银行账号"
          size="small"
        >
          <el-input v-model="temp.bankAccount" />
        </el-form-item>

        <el-form-item
          label="供应商地址"
          prop="address"
          placeholder="请选择填写供应商地址"
          size="small"
        >
          <el-input v-model="temp.address" />
        </el-form-item>

        <el-form-item
          label="医院Id"
          prop="hospitalId"
          placeholder="请选择填写医院Id"
          size="small"
        >
          <el-input v-model="temp.hospitalId" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          size="small"
          @click="dialogStatus === 'create' ? insertData() : updateData()"
        >
          保存
        </el-button>
        <el-button size="small" @click="dialogFormVisible = false">
          关闭
        </el-button>
      </div>
    </el-dialog>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[6, 10, 25, 50]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { DzmHisSupplier_list } from "@/api/api_g";
import { DzmHisSupplier_delete } from "@/api/api_g";
import { DzmHisSupplier_insert } from "@/api/api_g";
import { DzmHisSupplier_update } from "@/api/api_g";
import { DzmHisSupplier_getByid } from "@/api/api_g";

const statusOptions = [
  { key: 1, display_name: "启用" },
  { key: 2, display_name: "禁用" },
];
const statusTypeKeyValue = statusOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name;
  return acc;
}, {});

export default {
  name: "doctor",
  data() {
    const tId = this.$route.query.dictId;
    return {
      // 分页后的当前页数据
      list: [],
      //当前数据页的第几页
      currentPage: 1,
      // 总数据条数xx
      total: 0,
      // 每页显示多少行数据,默认为10条
      pagesize: 6,
      // 代表是从后端获取的所有数据
      ticket: [],
      // 控制编辑排版信息对话框
      open: false,
      // 表单参数
      temp: "",
      //
      // form: {},
      monitorForm: {},

      //查询条件
      listQuery: {
        // sid: sid,
        // dictId: tId,
      },

      resetTemp() {
        // 重置 表单
        this.temp = {};
      },
      temp: {
        // 新增/修改temp
        sid: "",
        supplierName: "",
        contactName: "",
        contactMobile: "",
        contactTelephone: "",
        bankAccount: "",
        address: "",
        hospitalId: "",
        createTime: "",
        updateTime: "",
      },
      dialogFormVisible: false, //新增修改弹出框
      dialogStatus: "", //弹出框 显示隐藏控制
      textMap: {
        update: "修改",
        create: "新增",
      },
      rules: {
        //新增修改保存时 校验规则
        supplierName: [
          //blur   change
          { required: true, message: "供应商名称不能为空", trigger: "blur" },
        ],
        contactName: [
          { required: true, message: "联系人名称不能为空", trigger: "blur" },
        ],
        contactMobile: [
          { required: true, message: "联系人手机不能为空", trigger: "blur" },
        ],
        contactTelephone: [
          { required: true, message: "联系人电话不能为空", trigger: "blur" },
        ],
        bankAccount: [
          { required: true, message: "银行账号不能为空", trigger: "blur" },
        ],
        address: [
          { required: true, message: "供应商地址不能为空", trigger: "blur" },
        ],
        hospitalId: [
          { required: true, message: "医院Id不能为空", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.getDoctors();
  },
  methods: {
    // getList() {
    //   //查询分页
    //   this.listLoading = true;
    //   DzmHisSupplier_list(this.listQuery, this.pageInfo).then((response) => {
    //     this.list = response.data.records;
    //     this.total = response.data.total;

    //     // Just to simulate the time of the request
    //     setTimeout(() => {
    //       this.listLoading = false;
    //     }, 1 * 1000);
    //   });
    // },

    /** 查询 */
    getDoctors() {
      //this.listLoading = true;
      DzmHisSupplier_list().then((response) => {
        // console.log(response.data[0]);
        if (response.code === 200) {
          this.ticket = response.data;
          //获取返回数据的总行数
          this.total = response.data.length;
          // 获取当前页的数据,此方法在下方定义
          this.getDoctorInfo();
          this.$message({
            message: "数据加载成功",
            type: "success",
          });
        } else {
          // 失败提示信息
          this.$$message({
            message: "数据加载错误",
            type: "error",
          });
        }
      });
    },
    // 此方法用来获取当前页的数据
    getDoctorInfo() {
      // 清空表格的list 数据
      this.list = [];
      // 获取当前页的数据
      for (
        let i = (this.currentPage - 1) * this.pagesize;
        i < this.total;
        i++
      ) {
        // 将便利的数据添加到 list 里面
        this.list.push(this.ticket[i]);
        // 判断是否达到每一页的要求
        if (this.list.length === this.pagesize) break;
      }
    },
    // 分页时修改每页的行数,这里会自动传入一个size
    handleSizeChange(size) {
      // 修改当前每页的数据行数
      this.pagesize = size;
      // 数据重新分页
      this.getDoctorInfo();
    },
    // 调整当前的页码
    handleCurrentChange(pageNumber) {
      // 修改当前的页码
      this.currentPage = pageNumber;
      //数据重新分页
      this.getDoctorInfo();
    },

    async handleDelete(index, rowdata) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          DzmHisSupplier_delete(rowdata.sid).then(()=>{
               this.getDoctors();
               this.$message({
                type: "success",
               message: "删除成功!",
            });
          });
          
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
         
    },

    handleCreatebutton() {
      // 点击新增操作
      this.resetTemp(); //表单重置
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    insertData() {
      // 执行后端 新增方法
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          DzmHisSupplier_insert(this.temp).then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.dialogFormVisible = false;
             this.getDoctors();
              this.$notify({
                title: "新增",
                message: "新增成功!",
                type: "success",
                duration: 2000,
              });
            }
          });
        }
      });
    },

    handleUpdate(row) {
      this.resetTemp(); //表单重置
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        const id = row.sid || this.sid;
        DzmHisSupplier_getByid(id).then((response) => {
          this.temp = response.data;
          console.log(this.form);
          console.log(this.temp.supplierName);
          this.title = "修改供应商信息";
          this.$refs["dataForm"].clearValidate();
          ReferenceError;
        });
      });
    },

    updateData() {
      // 执行后端 修改方法
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp);
          console.log(Object.assign(this.temp));

          DzmHisSupplier_update(tempData).then((res) => {
            if (res.code == 200) {
              this.dialogFormVisible = false;
              this.getDoctors();
              this.$notify({
                title: "修改",
                message: "修改成功",
                type: "success",
                duration: 2000,
              });
            }
          });
        }
      });
    },
  },
};
</script>